<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的账户</title>
  <link href="../static/layui-v2.9.1/layui/css/layui.css" rel="stylesheet">
  <script src="../static/layui-v2.9.1/layui/layui.js"></script>
  <link rel="stylesheet" href="../static/css/footer.css">
  <link rel="stylesheet" href="../static/framework/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../static/framework/reset.css">

  <style>
    /* 基本样式 */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      padding-bottom: 60px;
      /* 确保底部空间留给固定在底部的 footer */
    }

    .header,
    .nav,
    .aside {
      padding: 20px;
      text-align: center;
    }

    .header {
      background-color: hsl(0, 0%, 100%);
    }

    .nav {
      background-color: #5fcb97;
      border-radius: 10px;
    }

    .main {
      background-color: hsl(0, 3%, 86%);
    }

    .aside {
      background-color: #6295e8;
      border-radius: 10px;
    }



    .footer li {
      cursor: pointer;
      /* 让鼠标指针显示为手型，表示可以点击 */
      transition: transform 0.2s ease;
      /* 添加变换动画，这里使用简单的缩放效果 */
    }

    .footer li:hover {
      transform: scale(1.1);
      /* 鼠标悬停时放大一点 */
    }
  </style>
</head>

<body>
<div class="wrapper" style="padding: 20px;">
  <header class="header">
    <div>
      <img th:src="@{'static/img/' + ${session.user.photo}}" alt="我的头像" width="100px" height="100px">
    </div>
      <div>用户名：<div th:text="${session.user.realName}" style="display: inline-block;">离线文本</div></div>
  </header>
  <nav class="nav" style="cursor: pointer;">
    <div class="layui-row">
      <div class="layui-col-xs3">
        <div class="grid-demo grid-demo-bg1" onclick="location.href='/card'" th:utext="${session.cardSum} + '<br>银行卡'">
          1
          <br>
          银行卡
        </div>
      </div>
      <div class="layui-col-xs3">
        <div class="grid-demo">0<br>小豆</div>
      </div>
      <div class="layui-col-xs3">
        <div class="grid-demo grid-demo-bg1">0<br>积分</div>
      </div>
      <div class="layui-col-xs3">
        <div class="grid-demo">0<br>礼券</div>
      </div>
    </div>
  </nav>

  <main class="main" onclick="location.href='/accountList'">
    <div class="layui-bg-gray" style="padding: 16px;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">资产负债：</div>
            <div class="layui-card-body">
              <div>
                <p>我的资产：</p><span class="value" th:text="'￥ ' + ${session.moneySum}">$ 3891.94</span>
              </div>
              <br>
              <div>
                <p>待还款：</p><span class="value" th:text="'￥ ' + ${session.debt}">$ 0</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <div style="color: red; " th:text="${session.msg}">提示信息</div>

  <aside class="aside" style="cursor: pointer" ; onclick="location.href='/changedInformation'">编辑我的信息</aside>

  <!-- 底部功能区 -->
  <ul class="footer" style="list-style: none;  justify-content: space-around; padding: 0;">
    <li style="text-align: center; " onclick="location.href='/index'">
      <i>
        <img src="../static/img/首页.png" alt="首页" width="30px" height="30px">
      </i>
    </li>
    <li style="text-align: center;" onclick="location.href='/finance'">
      <img src="../static/img/金融.png" alt="金融助手" width="30px" height="30px">
    </li>
    <li style="text-align: center; ">
      <img src="../static/img/账户1.png" alt="账户" width="30px" height="30px">
    </li>
  </ul>

</div>

<script>

</script>
</body>

</html>